<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="super-theme-example">
			<div id="tree"></div>
			<br /><br />
			<div style="height: 250px;">
				<table id="ttg" style="width:400px;height:300px"></table>
			</div>
			<script type="text/javascript">
				var tree_data2 = [{
					"id": 1,
					"text": "Node 1",
					"children": [{
						"id": 11,
						"text": "Node 11"
					}, {
						"id": 12,
						"text": "Node 12"
					}]
				}, {
					"id": 2,
					"text": "Node 2"
				}];
				$('#tree').tree({
					data: tree_data2,
					//url: 'js/data/tree_data.json',
					parentField: 'parentId',
					checkbox: true,
					animate: true
				});
				/*------------------------树表格*/
				var treegridJson = [{
					"id": 1,
					"name": "C",
					"size": "",
					"date": "02/19/2010",
					"children": [{
						"id": 2,
						"name": "Program Files",
						"size": "120 MB",
						"date": "03/20/2010",
						"children": [{
							"id": 21,
							"name": "Java",
							"size": "",
							"date": "01/13/2010",
							"state": "closed",
							"children": [{
								"id": 211,
								"name": "java.exe",
								"size": "142 KB",
								"date": "01/13/2010"
							}, {
								"id": 212,
								"name": "jawt.dll",
								"size": "5 KB",
								"date": "01/13/2010"
							}]
						}, {
							"id": 22,
							"name": "MySQL",
							"size": "",
							"date": "01/13/2010",
							"state": "closed",
							"children": [{
								"id": 221,
								"name": "my.ini",
								"size": "10 KB",
								"date": "02/26/2009"
							}, {
								"id": 222,
								"name": "my-huge.ini",
								"size": "5 KB",
								"date": "02/26/2009"
							}, {
								"id": 223,
								"name": "my-large.ini",
								"size": "5 KB",
								"date": "02/26/2009"
							}]
						}]
					}, {
						"id": 3,
						"name": "eclipse",
						"size": "",
						"date": "01/20/2010",
						"children": [{
							"id": 31,
							"name": "eclipse.exe",
							"size": "56 KB",
							"date": "05/19/2009"
						}, {
							"id": 32,
							"name": "eclipse.ini",
							"size": "1 KB",
							"date": "04/20/2010"
						}, {
							"id": 33,
							"name": "notice.html",
							"size": "7 KB",
							"date": "03/17/2005"
						}]
					}]
				}];
				/*树形表格*/
				$('#ttg').treegrid({
					//url: 'js/data/tree_grid_data.json',
					data: treegridJson,
					idField: 'id',
					treeField: 'name',
					columns: [
						[{
							field: 'name',
							title: 'name'
						}, {
							field: 'size',
							title: 'size',
							width: 100
						}, {
							field: 'date',
							title: 'date',
							width: 100
						}]
					]
				});
			</script>
		</div>
	</body>

</html>